<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multicast Chat App</title>
    <link href="index.css" rel="stylesheet"/>
    <script src="Collection.js"></script>
    <script src="index.js"></script>
</head>
<body>
<div id="title-bar">
    <img src="128.png"/>

    <div id="title" style="-webkit-flex: 1">Multicast Chat Demo App</div>
    <button id="close" href="#">&times;</button>
</div>
<div id="container">
    <div id="main-block">
        <div id="message-container">
            <ul id="messages">
                <h3>Welcome to Multicast Chat Demo App!</h3>
                <li>This app allows you to send messages to you local network
                    without help of any server.
                </li>
                <li id="help" class="hide-help help">
                    <a href="#help" id="toggle-help">[Show help]</a>
                    <ul class="help-text">
                        <li>Whoever installed this app in your local network can
                            see the messages you send. They are listed on the
                            right panel.
                        </li>
                        <li>Press <span style="font-weight: bold">Enter</span>
                            to send message; Press <span
                                    style="font-weight: bold">Shift+Enter</span>
                            for new lines.
                        </li>
                        <li>Double click on your name to edit it.</li>
                        <li class="info warning">[Warning] Messages are
                            transferred in public with plain text. Due to the
                            nature of UDP protocol, your message could be lost
                            randomly.
                        </li>
                    </ul>
                </li>
                <li>
            </ul>
        </div>
        <div id="input-panel">
            <div id="splitter">
            </div>
            <div id="client-id-line">
                <div id="client-id" title="Double click to change."></div>
                :
            </div>
            <div class="text-input">
                <textarea id="input-box" tabindex="0"
                          title="Press Enter to send."></textarea>
            </div>
        </div>
    </div>
    <div id="user-panel" title="People in you local network.">
        <div class="list-cnt">
            <ul id="user-list">
                <li>(No user found)</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>